<template>
  <div>
    <div class="model">
      <div class="contain">
        <ul class="left clearFix">
          <li>
            <a href="javascript:void(0);" class="top-a">
              ENGLISH
            </a>
          </li>
          <li>
            <a href="javascript:void(0);" class="top-a" @click="hadleCal">
              <i class="el-icon-date"></i>
              <span>校历</span>
            </a>
          </li>
          <li>
            <a href="https://map.sjtu.edu.cn/" target="_blank" class="top-a">
              <i class="el-icon-location-information"></i>
              <span>地图</span>
            </a>
          </li>
          <li>
            <a href="http://vs.sjtu.edu.cn/" target="_blank" class="top-a">
              <i class="el-icon-view"></i>
              <span>视觉交大</span>
            </a>
            <div></div>
          </li>
        </ul>
        <ul class="right clearFix">
          <li>
            <a href="https://www.sjtu.edu.cn/#" target="_target" class="top-a">
              <i class="el-icon-office-building"></i>
              <span>院系设置</span>
            </a>
          </li>
          <li>
            <a href="javascript:void(0);" @click="mechShow" class="top-a">
              <i class="el-icon-school"></i>
              <span>机构设置</span>
            </a>
            <transition name="fade">
              <div class="mechBox" v-if="maskShow">
                <div v-for="(item, index) in list" :key="index" class="items">
                  <h1 class="title1">{{ item.name }}</h1>
                  <div
                    class="little-items"
                    v-for="(its, ind) in item.children"
                    :key="index + '' + ind"
                  >
                    <a :href="its.path" class="its-a" target="_blank">{{
                      its.name
                    }}</a>
                    <template v-if="its.des && its.des.length > 0">
                      <a
                        :href="aits.path"
                        v-for="(aits, aind) in its.des"
                        :key="index + '' + ind + '' + aind"
                        class="aits"
                        target="_blank"
                        >（ {{ aits.name }}）</a
                      >
                    </template>
                  </div>
                </div>
              </div>
            </transition>
          </li>
        </ul>
      </div>
    </div>
    <transition name="fade">
      <div class="mask" v-if="maskShow" @click="maskShow = false"></div>
    </transition>
    <transition name="fade">
      <SchoolCalendar
        v-if="showCalendar"
        ref="schoolCalendar"
        @closeCal="closeCal"
      ></SchoolCalendar>
    </transition>
  </div>
</template>

<script>
import SchoolCalendar from "./school-calendar";
export default {
  components: { SchoolCalendar },
  data() {
    return {
      maskShow: false,
      showCalendar: false,
      list: [
        {
          name: "职能部门",
          children: [
            {
              name: "党政办公室",
              path: "http://dzb.sjtu.edu.cn/",
              des: [
                {
                  name: "改革与发展研究室",
                  path: "http://gfb.sjtu.edu.cn/"
                },
                {
                  name: "安保委办公室",
                  path: ""
                },
                {
                  name: "地方合作办公室",
                  path: "http://lc.sjtu.edu.cn/"
                }
              ]
            },
            {
              name: "纪委办公室",
              path: "http://jiwei.sjtu.edu.cn/",
              des: [
                {
                  name: "监察处",
                  path: ""
                }
              ]
            }
          ]
        },
        {
          name: "直属单位",
          children: [
            {
              name: "读书馆",
              path: "http://www.lib.sjtu.edu.cn/"
            },
            {
              name: "档案文博管理中心",
              path: "http://archives.sjtu.edu.cn/"
            },
            {
              name: "教育技术中心",
              path: "http://etc.sjtu.edu.cn/"
            },
            {
              name: "网络信息中心",
              path: "https://net.sjtu.edu.cn/",
              des: [
                {
                  name: "网络信息安全和信息化领导小组办公室"
                }
              ]
            }
          ]
        },
        {
          name: "直管企业",
          children: [
            {
              name: "上海交创科技发展公司",
              path: "https://tzjt.sjtu.edu.cn/"
            },
            {
              name: "上海交通大学出版社有限公司",
              path: "http://www.jiaodapress.com.cn/"
            },
            {
              name: "上海交大教育服务产业投资管理（集团）有限公司",
              path: "https://jfjt.sjtu.edu.cn/"
            },
            {
              name: "上海交大海洋水下工程科学研究院有限公司",
              path: "http://cuti.sjtu.edu.cn/"
            },
            {
              name: "上海交大只是产权管理有限公司",
              path: "http://ipm.sjtu.edu.cn/"
            }
          ]
        },
        {
          name: "附属医院",
          children: [
            {
              name: "瑞金医院",
              path: "http://www.rjh.com.cn/2013ruijin/ruijin/sy/index.shtml"
            },
            {
              name: "仁济医院",
              path: "https://www.renji.com/"
            },
            {
              name: "新华医院",
              path: "http://www.xinhuamed.com.cn/"
            },
            {
              name: "第九人民医院",
              path: "http://www.9hospital.com.cn/"
            },
            {
              name: "上海市第一人民医院",
              path: "http://www.firsthospital.cn/home/index.html"
            }
          ]
        },
        {
          name: "附属学校",
          children: [
            {
              name: "上海交通大学附属中学",
              path: "http://www.jdfz.sh.cn/"
            },
            {
              name: "上海交通大学第二附属中学",
              path: "http://www.jd2fz.sjtu.edu.cn/"
            },
            {
              name: "上海交通大学附属小学",
              path: "http://jdfx.xhedu.sh.cn/"
            },
            {
              name: "上海交通大学附属实验小学",
              path: "http://jdfx.mhedu.sh.cn/"
            },
            {
              name: "上海交通大学幼儿园",
              path: "https://www.sjtu.edu.cn/"
            },
            {
              name: "上海交通大学闽行幼儿园",
              path: "https://www.sjtu.edu.cn/"
            }
          ]
        }
      ]
    };
  },
  methods: {
    mechShow() {
      this.maskShow = true;
    },
    hadleCal() {
      this.showCalendar = true;
    },
    closeCal() {
      this.showCalendar = false;
    }
  }
};
</script>

<style scoped lang="scss">
.model {
  background-color: rgba(107, 0, 4, 0.8);
  .contain {
    width: $base-width;
    color: #ffffff;
    margin: 0 auto;
    font-size: 12px;
    display: flex;
    justify-content: space-between;
    @media only screen and (min-width: 480px) and (max-width: 1200px) {
      /* 这里写宽度大于321px小于1024px的样式(一般是平板电脑) */
      width: 100%;
    }
    @media screen and (min-width: 320px) and (max-width: 480px) {
      /* 在这里写小屏幕设备的样式 */
      width: 100%;
    }
    .top-a {
      display: block;
      color: inherit;
      padding: 8px 15px 8px 15px;
      margin-left: 8px;
      margin-right: 8px;
      transition: 0.3s;
      &:hover {
        background-color: $base-color;
      }
      i {
        margin-right: 5px;
      }
    }
    .left {
      li {
        float: left;
        &:first-child {
          .top-a {
            margin-left: 0;
          }
        }
      }
    }
    .right {
      li {
        float: left;
        position: relative;
        &:last-child {
          .top-a {
            margin-right: 0;
          }
        }
        .mechBox {
          position: absolute;
          width: 500px;
          transform: translateY(100%) translateX(-400px);
          bottom: -5px;
          left: 0;
          color: #333;
          border: 1px solid #999;
          border-radius: 8px;
          transition: 0.3s;
          z-index: 300;
          background-color: #ffffff;
          box-shadow: 0 0 5px #333;
          .items {
            border-bottom: 1px solid #999;
            &:last-child {
              border-bottom: none;
              .title1 {
                border-bottom: none;
              }
            }
            .little-items {
              display: inline-block;
              margin: 0px 5px;
              padding: 8px 5px;
              .its-a {
                font-size: 10px;
              }
              .aits {
                color: #999;
                font-size: 8px;
              }
            }
            .title1 {
              color: $base-color;
              font-weight: 600;
              border-bottom: 1px solid #999;
              padding: 8px 15px;
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}
.mask {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 200;
}
.fade-enter-active {
  transition: 0.5s;
  opacity: 0;
}
.fade-enter-to {
  opacity: 1;
}
.fade-leave-active {
  transition: 0.5s;
  opacity: 1;
}
.fade-leave-to {
  opacity: 0;
}
</style>
